<!-- 展示容器信息 -->
<div *ngIf="dataSet!=null">
  <div nz-row>
    <div nz-col nzSpan="24" class="detail-info">
      <!-- 第一行 -->
      <div nz-row>
        <div nz-col nzSpan="16" class="detail-title-info">
          {{ dataSet.name | noData }}
        </div>
        <div nz-col nzSpan="8" class="float-right" style="font-size: 20px">
          <i nz-icon type="exclamation-circle" theme="outline" style="color:coral"></i>&nbsp;&nbsp;&nbsp;&nbsp;
          <i nz-icon type="folder-add" theme="outline" style="color:cornflowerblue"></i>&nbsp;&nbsp;&nbsp;&nbsp;
          <i nz-icon type="delete" theme="outline"></i>
        </div>
      </div>
      <!-- 第二行 -->
      <div nz-row>
        <div nz-col class="detail-content-info">
          <strong>版本: </strong>
          {{ dataSet.version | noData }} &nbsp; | &nbsp;
          <strong>发布日期: </strong>
          <span>
            {{ dataSet.releaseDate | noData }}
          </span>
          &nbsp; | &nbsp;
          <strong>应用总数: </strong>
          {{ dataSet.appNum | noData }} &nbsp; | &nbsp;
          <strong>CVE总数: </strong>
          <span class="warning">
            {{ dataSet.cveNum | noData }}
          </span>
          &nbsp; | &nbsp;
          <strong>CNNVD总数:</strong>
          {{ dataSet.cnnvdNum | noData }}
        </div>
      </div>
    </div>
  </div>

  <!-- 展示应用数、服务器数 -->
  <div nz-row>
    <div nz-col nzSpan="24" class="cve-application">
      <div nz-row>
        <div nz-col class="application-title-info">
          影响应用
        </div>
      </div>
      <div nz-row>
        <div nz-col class="application-content-info">
          <nz-list [nzGrid]="{gutter: 16, xs: 24, sm: 12, md: 6, lg: 6, xl: 4 }">
            <span *ngFor="let app of dataSet?.apps">
              <i nz-icon type="windows" theme="outline"></i>
              <a href="javascript:;" class="cve-application-list">
                {{ app.name }}
              </a>
            </span>
          </nz-list>
        </div>
      </div>
      <div class="detail-divider">
        <nz-divider></nz-divider>
      </div>

      <div nz-row>
        <div nz-col class="application-title-info">
          部署服务器
        </div>
      </div>
      <div nz-row>
        <div nz-col class="application-title-info">
          <nz-list [nzGrid]="{gutter: 16, xs: 24, sm: 12, md: 6, lg: 6, xl: 4 }">
            <ng-container *ngIf="dataSet?.servers; else dataNull">

              <a href="javascript:;" class="cve-application-list" *ngFor="let server of dataSet?.servers;let key=index">
                <i class="icon-sac-server"></i>
                {{ server?.serverName }}
                <i class="heart icon-sac-heart"></i>
              </a>

            </ng-container>
            <ng-template #dataNull>
              <i class="icon-sac-server"></i> 暂无数据
            </ng-template>

          </nz-list>
        </div>
      </div>

    </div>
  </div>

  <div nz-row class="detail-cve" [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }">
    <!-- 第一行 -->
    <div nz-row>
      <div class="panel-title" nz-col nzSpan="12">
        CVE
      </div>
      <div class="panel-title" nz-col nzSpan="12">
        CNNVD
      </div>
    </div>
    <div nz-col [nzSpan]="12">
      <ng-container *ngIf="dataSet?.cves; else noCVEs">
        <!-- 此处加 for 循环 -->
        <div nz-row class="panel-box" *ngFor="let cve of dataSet?.cves">
          <div nz-row class="deatail-box">
            <div ng-col>
              <a href="javascrpit:;" class="panel-box-title">
                {{ cve.name | noData }}
              </a>
              &nbsp;&nbsp;
              <span class="panel-box-title">分数</span>
              <span>
                {{ cve.score | noData }}
              </span>
            </div>
          </div>

          <div nz-row class="deatail-box">
            <div nz-row>
              <div nz-col nzSpan="6">访问复杂性: </div>
              <div nz-col nzSpan="6">
                <strong>
                  <span>
                    {{ cve.accessComplexity | noData }}
                  </span>
                </strong> </div>
              <div nz-col nzSpan="6">可用性影响: </div>
              <div nz-col nzSpan="6">
                <strong>
                  <span>
                    {{ cve.availabilityImpact | noData }}
                  </span>
                </strong>
              </div>
            </div>
            <div nz-row>
              <div nz-col nzSpan="6">访问矢量:</div>
              <div nz-col nzSpan="6">
                <strong>
                  <span>
                    {{ cve.accessVector | noData }}
                  </span>
                </strong>
              </div>
              <div nz-col nzSpan="6">保密性影响:</div>
              <div nz-col nzSpan="6">
                <strong>
                  <span>
                    {{ cve.confidentialityImpact | noData }}
                  </span>
                </strong>
              </div>
            </div>
            <div nz-row>
              <div nz-col nzSpan="6">需要验证:</div>
              <div nz-col nzSpan="6">
                <strong>
                  <span>
                    {{ cve.authentication | noData }}
                  </span>
                </strong>
              </div>
              <div nz-col nzSpan="6">完整性影响:</div>
              <div nz-col nzSpan="6">
                <strong>
                  <span>
                    {{ cve.integrityImpact | noData }}
                  </span>
                </strong>
              </div>
            </div>
          </div>
          <div nz-row class="deatail-box">
            <div nz-col>
              {{ cve.description | noData }}
            </div>
          </div>
        </div>
      </ng-container>
      <ng-template #noCVEs>
        <div nz-row class="panel-box no-data">
          暂无记录
        </div>
      </ng-template>
    </div>

    <div nz-col [nzSpan]="12">
      <ng-container *ngIf="dataSet?.cnnvds; else noCNNVDs">
        <div nz-row class="panel-box" *ngFor="let cnnvd of dataSet?.cnnvds">
          <div nz-row class="deatail-box">
            <div ng-col class="panel-box-title">
              <a href="javascript:;">
                {{ cnnvd.name | noData }}
              </a>
            </div>
          </div>

          <div nz-row class="deatail-box">
            <div nz-row>
              <div nz-col nzSpan="6">CNNVD编号:</div>
              <div nz-col nzSpan="6"><strong>{{ cnnvd.cnnvdId | noData }}</strong></div>
              <div nz-col nzSpan="6">威胁类型:</div>
              <div nz-col nzSpan="6"><strong>{{ cnnvd.vulnType | noData }}</strong></div>
            </div>
            <div nz-row>
              <div nz-col nzSpan="6">危害等级:</div>
              <div nz-col nzSpan="6">
                <strong>
                  {{ cnnvd.severity | noData }}
                </strong>
              </div>
              <div nz-col nzSpan="6">发布时间:</div>
              <div nz-col nzSpan="6"><strong>{{ cnnvd.publishedDate | noData }}</strong></div>
            </div>
            <div nz-row>
              <div nz-col nzSpan="6">CVE编号:</div>
              <div nz-col nzSpan="6"><strong>{{ cnnvd.cveId | noData }}</strong></div>
              <div nz-col nzSpan="6">更新时间:</div>
              <div nz-col nzSpan="6"><strong>{{ cnnvd.modifiedDate | noData }}</strong></div>
            </div>
          </div>

          <div nz-row class="deatail-box">
            <div nz-col>
              {{ cnnvd.vulnDescript | noData }}
            </div>
          </div>
        </div>
      </ng-container>
      <ng-template #noCNNVDs>
        <div nz-row class="panel-box no-data">
          暂无记录
        </div>
      </ng-template>
    </div>
  </div>
</div>
